<template>
  <li @click="goDetail(v)">
    <img :src="v.pic" />
    <div class="title">{{ v.derivativesShortTitle }}</div>
    <p class="price">
      ￥{{ v.price }}
      <del>￥{{ v.value }}</del>
    </p>
  </li>
</template>

<script>
export default {
  props: ['v'],
  data() {
    return {};
  },
  methods: {
    goDetail(v) {
      // this.$router.push({ name: 'storeDetail', query: { name: v.derivativesShortTitle, img: v.pic, price: v.price } });
      this.$router.push({ name: 'storeDetail', query: { id: v.dealid } });
    },
  },
};
</script>

<style lang="less" scoped>
li {
  width: 3.2rem;
  box-sizing: border-box;
  border-radius: 0.1rem;
  overflow: hidden;
  margin-bottom: 0.3rem;
  font-size: 0.27rem;
  background-color: white;
  img {
    width: 100%;
    height: 3.2rem;
  }
  .title {
    height: 0.8rem;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 0.1rem;
    margin: 0.1rem 0;
  }
  .price {
    padding: 0.1rem;
    color: red;
    margin: 0.1rem 0;
    del {
      color: #999;
    }
  }
}
</style>
